<template>
  <div class="tool-bar-ri">
    <SearchMenu />
    <Fullscreen />
    <Language class="mr20" />
    <Settings />
    <div class="header-icon">
      <Message id="message" />
    </div>
    <Report />
    <Avatar />
  </div>
</template>

<script setup lang="ts">
import Language from './components/Language.vue'
import Settings from '../Settings/Settings.vue'
import SearchMenu from './components/SearchMenu.vue'
import Fullscreen from './components/Fullscreen.vue'
import Message from './components/Message.vue'
import Report from './components/Report.vue'
import Avatar from './components/Avatar.vue'
</script>

<style scoped lang="scss">
.tool-bar-ri {
  display: flex;
  align-items: center;
  justify-content: center;
  .header-icon {
    display: flex;
    align-items: center;
    & > * {
      margin-left: 21px;
    }
  }
}
</style>
